<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Banner管理</title>
    <link rel="stylesheet" href="/plugins/layui/css/layui.css" media="all"/>
    <link rel="stylesheet" href="/css/global.css" media="all">
    <link rel="stylesheet" href="/plugins/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="/css/table.css"/>
    <style type="text/css">
        .searcheBottom{margin-bottom: 10px;}
    </style>
</head>

<body>
<div class="admin-main">
    <blockquote class="layui-elem-quote">
        <form>
            <div class="demoTable">
                <div class="layui-inline searcheBottom">
                    Banner名称：
                    <div class="layui-inline">
                        <input id="bannerName" class="layui-input" name="bannerName" autocomplete="off" placeholder="Banner名称" />
                    </div>
                </div>

                <div class="layui-inline searcheBottom">
                    上线时间:
                    <div class="layui-input-inline">
                        <input class="layui-input" name="startTime" placeholder="开始时间" id="startTime"/>
                    </div>
                    <div class="layui-input-inline">
                        &nbsp;-&nbsp;
                    </div>
                    <div class="layui-input-inline">
                        <input class="layui-input" name="endTime" placeholder="结束时间" id="endTime"/>
                    </div>
                </div>

                <div class="layui-inline searcheBottom">
                    <button type="button" class="layui-btn" data-type="reload" id="search">搜索</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                    <a href="/manage/banner/addBanner" class="layui-btn addChannel" id="add">
                        <i class="layui-icon">&#xe608;</i>发布Banner
                    </a>
                </div>
            </div>
        </form>
    </blockquote>
    <span style="font-size: 16px;"><b>APP 首页 Banner列表</b></span>
    <table class="layui-hide" id="Bannertable" lay-filter="tableFilter"></table>

</div>
<script type="text/javascript" src="/plugins/layui/layui.js"></script>
<script type="text/javascript" src="/plugins/layui/lay/modules/util.js"></script>
<script type="text/javascript" src="/js/utils.js"></script>
<script>
    layui.config({
        version: '1515376178709', //为了更新 js 缓存，可忽略
        base: '/js/'
    });

    layui.use(['laydate', 'layer', 'table', 'form', 'element','util'], function(){
        var laydate = layui.laydate //日期
            ,laypage = layui.laypage //分页
            ,layer = layui.layer //弹层
            ,table = layui.table //表格
            ,carousel = layui.carousel //轮播
            ,upload = layui.upload //上传
            ,element = layui.element//元素操作
            ,util = layui.util
            ,$=layui.jquery

        var start = {
            max: '2099-06-16 23:59:59',
            format: 'yyyy-MM-dd HH:mm:ss',
            type: 'datetime',
            value: new Date(),
            show: true
            ,done: function(value){
                end.min = value; //开始日选好后，重置结束日的最小日期
                end.start = value //将结束日的初始值设定为开始日
            }
        };
        var end = {
            max: '2099-06-16 23:59:59',
            format: 'yyyy-MM-dd HH:mm:ss',
            type: 'datetime',
            value: new Date(),
            show: true
            ,done: function(value){
                start.max = value; //结束日选好后，重置开始日的最大日期
            }
        };

        $('#startTime').bind('click',function (){
            start.elem = this;
            start.closeStop = this
            laydate.render(start);
        });
        $('#endTime').bind('click',function (){
            end.elem = this;
            end.closeStop = this
            laydate.render(end);
        });

        //执行一个 table 实例
        pageInit();
        function pageInit() {
            table.render({
                elem: '#Bannertable'
                ,url: '/manage/banner/selBanner' //数据接口
                ,method:"post"
                ,page: true //开启分页
                ,cols: [[ //表头
                    {field: 'id', title: 'ID', sort: true,align:'center'}
                    ,{field: 'bannerName', title: 'banner名称'}
                    ,{field: 'bannerImg', title: 'banner图片',align: 'center',templet: function(d){
                        return '<div><img style="width: 50px;height: 50px;" src="'+d.bannerImg+'"></div>'
                    }}
                    ,{field: 'shelfTime', title: '上线时间', sort: true, align:'center',templet: function(d){
                        if(d.shelfTime !=null){
                            return util.toDateString(d.shelfTime,'yyyy-MM-dd HH:mm:ss')
                        }else {
                            return '';
                        }
                    }}
                    ,{field: 'downTime', title: '下线时间', sort: true, align: 'center',templet: function(d){
                        if(d.downTime!=null){
                            return util.toDateString(d.downTime,'yyyy-MM-dd HH:mm:ss')
                        }else {
                            return '';
                        }
                    }}
                    ,{field: 'enableFlag', title: '状态',align: 'center',templet: function(d){
                        if(d.enableFlag == true){
                            return  '<div class="layui-btn layui-btn-xs">使用中</div>'
                        }else{
                            return '<div class="layui-btn layui-btn-xs layui-btn-danger">已下架</div>'
                        }
                    }}
                    ,{field: 'sort', title: '排序',sort: true,align: 'center'}
                    ,{title:"操作", align:'center',templet: function(d){
                        var tool = '<a class="layui-btn layui-btn-xs layui-btn-primary" lay-event="detil">查看</a>';
                        if(d.enableFlag == true){
                            tool += '<a class="layui-btn layui-btn-warm layui-btn-xs" lay-event="enable">下架</a>';
                        }else{
                            tool +='<a class="layui-btn layui-btn-xs" lay-event="enable">上架</a>';
                        }
                        return tool;
                    }}
                ]]
            });
        }

        //搜索
        var active = {
            reload: function () {
                var bannerName = $('#bannerName');
                var startTime = $('#startTime');
                var endTime = $('#endTime');
                table.reload('Bannertable', {
                    where: {
                        "bannerName":bannerName.val(),
                        "startTime":startTime.val(),
                        "endTime":endTime.val()
                    }
                });
            }
        };

        //将搜索框的值随请求传到后台
        $('#search').on('click', function () {
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });

        $(".layui-input").keydown(function (e) {
            if(e.keyCode == 13){
                $('#search').click();
            }
        });

        //表格监听
        table.on('tool(tableFilter)', function(obj){
            var data = obj.data;
            if (obj.event == "enable") {
                $.ajax({
                    url:"/manage/banner/enableBanner",
                    type:"post",
                    dataType:"json",
                    data:{"id":data.id,"enableFlag":data.enableFlag},
                    success:function(count){
                        table.reload("Bannertable");
                    }
                })
            } else if (obj.event == "detil") {
                location.href='/manage/banner/detilBanner?id='+data.id+'';
            }
        });
    });
</script>
</body>
</html>